<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>

<head>
	<base href="/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>菜单树</title>

    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico"> <link href="static/templet/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="static/templet/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="static/templet/css/plugins/jsTree/style.min.css" rel="stylesheet">
    <link href="static/templet/css/animate.min.css" rel="stylesheet">
    <link href="static/templet/css/style.min862f.css?v=4.1.0" rel="stylesheet">

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content  animated fadeInRight">

        <div class="row">
            
            <div class="col-sm-6">
            	<input type="hidden" id="roleId" value="${roleId }" />
            	<input type="hidden" id="type" value="${type }" />
            	<button id="allSelectBtn" class="btn btn-primary ">全选</button>
                <button id="cancelSelectBtn" class="btn btn-primary ">取消</button>
                <div class="ibox float-e-margins">
                    <div class="ibox-content">

                        <div id="using_json"></div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="static/templet/js/jquery.min.js?v=2.1.4"></script>
    <script src="static/templet/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="static/templet/js/content.min.js?v=1.0.0"></script>
    <script src="static/templet/js/plugins/jsTree/jstree.min.js"></script>
    <style>
        .jstree-open>.jstree-anchor>.fa-folder:before{content:"\f07c"}.jstree-default .jstree-icon.none{width:0}
    </style>
    <script type="text/javascript">
   		var roleId = $('#roleId').val();
		var type = $('#type').val();
        $(document).ready(function(){
        	
        	$("#using_json").jstree({
        		 "themes": { "responsive": false },
        			"plugins" : ["checkbox"],
        			"checkbox": {
        				'cascade' : 'undetermined',
                        "three_state": false//父子级别级联选择
                    },
        			'core' : {
 
                            'data': function (obj,callback) {
                            	$.post('role/getRoleMenuList',{roleId:roleId,type:type},function(data,status){
                            		if(status =='success'){
                            			var result = data.result;
                            			if(result.state == '1'){
											console.log(data.nodeList)
                            				callback(data.nodeList);
                            			}else{
                            				parent.layer.msg(result.message, {icon: 1});
                            			}
                            		}else{
                            			parent.layer.msg('加载失败', {icon: 1});
                            		}
                            		
                            	});
                          }
        			   }
        	});
        	$('#allSelectBtn').on("click", function () {
        		   $('#using_json').jstree('check_all');
        	});
        	
        	$('#cancelSelectBtn').on("click", function () {
     		   $('#using_json').jstree('uncheck_all');
     		});
          
        });
        var ok = function (callback){
        	
    		
    		var menuIds = new Array();
    		$("#using_json").find(".jstree-checked, .jstree-undetermined").each(function () {
    			menuIds.push($(this).closest('li').attr("id"));
    		})
    		var allChecked = $('#using_json').jstree().get_checked();
    		menuIds = menuIds.concat(allChecked);
    		
    		$.post("role/saveRoleMenu",{'menuIds':menuIds.toString(),'roleId':roleId, 'type':type},function(data,status){
    			if(status == 'success'){
    				
    				var result = data.result;
    				if(result.state == '1'){
    					var index= top.layer.getFrameIndex(window.name);
    					top.layer.msg('保存成功', {icon: 1});
    					top.layer.close(index);
    					callback();
        			}else{
 
        				top.layer.msg(result.message, {icon: 1});
        			}
    			}else{
    				top.layer.alter('保存失败');
    			}
    		});
    		
    	}

    </script>
</body>

</html>
